<template>
    <div id="cartProduct">
        <div id="front">
            <div id="prod">
                <router-link :to="{path: '/product', query: {id: id}}" id="prod">
                    <img :src="img" alt="">
                    <div id="name">{{name}}</div>
                </router-link>
            </div>
            <div id="description">{{description}}</div>
        </div>
        <div id="back">
            <div id="sellername"><router-link :to="{path:'/userInfo', query: {username:sellername, msg: 1}}">{{sellername}}</router-link></div>
            <div id="number">{{number}}</div>
            <div id="money">
                <div id="price">￥{{price}}</div>
                <div id="total">
                    总价￥{{total}}
                </div>
            </div>
            <div id="op">
                <router-link :to="{path: '/buyItNow', query: { id: id, number: number }}">
                    <i class="el-button">购买</i>
                </router-link>
                <i class="el-button" @click="deleteProduct">删除</i>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        img: String,
        name: String,
        description: String,
        sellername: String,
        number: '',
        price: '',
        id: '',
        total: ''
    },
    methods: {
        deleteProduct(){
            console.log(this.id)
            this.$emit('func', this.id)
        }
    }
}
</script>

<style scoped>
#cartProduct {
    display: flex;
    justify-content: space-around;
    border: 1px solid rgb(204,204,204);
    border-bottom: 2px solid rgb(204,204,204);
    margin: 0 10px;
    padding: 10px;
    margin-bottom: 10px;
}

#prod {
    display: flex;
    justify-content: space-around;
}

#front, #back{
    display: flex;
    justify-content: space-around;
    width: 50%;
}

img {
    width: 100px;
    height: 100px;
}

#sellername, #number, #price, #op, #total{
    width: 120px;
    text-align: center;
}

#name, #description{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}

#name {
    width: 150px;
}

#description {
    width: 200px;
}

#op {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#op i {
    font-style: normal;
    font-weight: bold;
    width: 100px;
    margin: 0 auto;
}

#money {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.el-button {
  background-color: rgb(255,0,54);
  color: #fff;
}
</style>